﻿@model Ring2Park.Models.ParkingSession

@{
    ViewBag.Title = "Book Parking Session";
}

<h2>Create</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Parking Session</legend>

        <div class="editor-label">
            <p>Search for parking location:</p>
        </div>
        <div class="editor-field">
            @Html.TextBox("Location")
            <!--@Html.Hidden("ParkingLocationId")-->
        </div>

        <div class="editor-label">
            <p>Or select from the list below:</p>
        </div>
        <div class="editor-field">
            @Html.DropDownList("ParkingLocationId", String.Empty)
            @Html.ValidationMessageFor(model => model.ParkingLocationId)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.StartDate)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.StartDate)
            @Html.ValidationMessageFor(model => model.StartDate)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Duration)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Duration)
            @Html.ValidationMessageFor(model => model.Duration)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.VehicleId, "Vehicle")
        </div>
        <div class="editor-field">
            @Html.DropDownList("VehicleId", String.Empty)
            @Html.ValidationMessageFor(model => model.VehicleId)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

<script type="text/javascript">

    $("#Location").autocomplete({
        source: '/ParkingLocation/List',
        dataType: 'JSON',
        select: function (event, ui) {
            $("#ParkingLocationId").val(ui.item.id);
        }
    });

</script>
